import { createRouter,createWebHashHistory } from "vue-router";

const Home = () => import('../views/Home.vue');
const About = () => import('../views/About.vue');
const UserCenter = () => import("../views/user-center/index.vue");
const UserProfile = () => import("../views/user-center/Profile.vue");
const UserSettings = () => import("../views/user-center/Settings.vue");
const VuexPage = () => import("../views/Vuex.vue");
//404
const NotFound = () => import("../views/404.vue");
const Product = () => import("../views/product.vue");

const routes = [
    {path:'/',redirect:'/home'},
    {path:'/home', component: Home},
    {path: '/about',component: About},
    {
        path:"/product/:id",
        name:"product",
        component:Product
    },
    {
        path:"/vuex",
        name:"vuex",
        component:VuexPage
    },
    {
        path: "/user",
        name: "userCenter",
        component: UserCenter,
        redirect:'/user/profile',
        children:[
            {
                path:"profile",
                name:"profile",
                component:UserProfile
            },
            {
                path:"settings",
                name:"settings",
                component:UserSettings
            },
        ]
    },
    {
        path:'/:pathMatch(.*)*',
        name: 'NotFound',
        component:NotFound
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router

